<html>
<head>
<title>Demo</title>
<style type="text/css">
#extra_controls, #scrollbar { 
    display:none; /* hide from incapable */
    }


/* ================================================================================================

    !!!!!!!! YOUR ATTENTION PLEASE !!!!!!!!

    Styles below particular to demo layout, not necessarily related to scrolling div code  

================================================================================================= */

div#wn {
    float:left;
    margin-right:8px;
    }
    
div#scrollbar {
    float:left;
    }

.clearer { clear:left; }
</style>
<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_scroll.js" type="text/javascript"></script>
<script src="js/dw_scrollbar.js" type="text/javascript"></script>
<script src="js/scroll_controls.js" type="text/javascript"></script>
<script type="text/javascript">

function init_dw_Scroll() {
    var wndo = new dw_scrollObj('wn', 'lyr1');
    wndo.setUpScrollbar("dragBar", "track", "v", 1, 1);
    // id, autohide (hide when not needed), axis
    wndo.setUpScrollControls('scrollbar', true, 'v');
    
    // Links to swap content 
    wndo.setUpLoadLinks('extra_controls');
    // Demonstrating jump to top and scroll to ID controls 
    wndo.setUpScrollControls('extra_controls');

    // Demonstrating how you can include a jump to top link inside the scroll area 
    wndo.setUpScrollControls('wn');
    
}

// if code supported, link in the style sheet and call the init function onload
if ( dw_scrollObj.isSupported() ) {
    dw_writeStyleSheet('css/extras_demo.css');
    // Enable printing here if you like 
    dw_scrollObj.printEnabled = true;
    dw_Event.add( window, 'load', init_dw_Scroll);
}

</script>
</head>
<body>
<h1>Demonstrating Extra Features </h1>
<p>Links below the scroll area demonstrates swapping content, scrolling to element with specific ID and jumping to the top.</p>

<div id="wn">
    <div id="lyr1" class="content">
    
        <p>Click the links below to see new content swapped into this scroll area. These links swap between layers that exist in this page. The code supports the ability to obtain content via ajax as well.</p>
        <p>See the <a href="http://www.dyn-web.com/code/scroll/documentation.php#issues">documentation</a> for some notes about problems that can occur with certain types of content being placed in the div's for scrolling. </p>
        <p>If one of the div's does not contain enough content for scrolling to be required, the scroll controls are hidden in this example.  The code supports the capability to auto hide the controls when they are not needed.</p>
        <p><img id="smile" src="images/demo/smile.gif" width="88" height="88" alt="" /></p>
        <p>The scrolling code now supports mousewheel scrolling.</p>
        <p>Happy Scrolling! </p>
        <p><a href="#" class="click_up_to_0_0">Jump to Top</a></p>
    
    </div>
    
    
    <div id="lyr2" class="content">
    
        <p>The code supports auto hiding the scroll controls if the scroll area has insufficient content to necessitate scrolling.</p>

    </div>
    
</div>



<!-- border attribute added to reduce support questions on the subject. 
    If you like valid strict markup, remove and place a img {border:none;} spec in style sheet -->
<div id="scrollbar">
    <div id="up"><a class="mouseover_up" href=""><img src="images/btn-up.gif" width="11" height="11" alt="" border="0" /></a></div>
    <div id="track">
        <div id="dragBar"></div>
    </div>
    <div id="down"><a class="mouseover_down" href=""><img src="images/btn-dn.gif" width="11" height="11" alt="" border="0" /></a></div>
</div>



<div class="clearer"></div>


<p id="extra_controls"><a class="load_wn_lyr2" href="">Swap Content</a> | 
    <a class="load_wn_lyr1" href="">Original Content</a> | 
    <a href="" class="click_up_to_0_0">Jump to Top</a> | 
    <a href="" class="scrollToId_smile_lyr1">Scroll to Smile</a></p>


<p>Back to <a href="index.html">index</a></p>

</body>
</html>
